<script setup>
//创建表单对象
import {onMounted, ref} from "vue";
import {doDownload, doGet} from "@/util/request.js";
import {showMessage} from "@/util/message.js";
import FileSaver from 'file-saver';
import {useRoute, useRouter} from "vue-router";

//路由对象
const router = useRouter()
const route=useRoute()
//表单信息分页对象
const customerList = ref([])
//分页对象
const pageInfo = ref({})
//获取数据
const loaData = (current) => {
  const params = {
    current: current,
    pageSize: 15
  }
  doGet('/api/customer/pageList', params).then(resp => {
    if (resp.data.code === 200) {
      //赋值
      customerList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total
      pageInfo.value.pageSize = resp.data.data.pageSize
    } else {
      showMessage('查询客户列表失败', resp.data.msg, 'error')
    }
  })
}
//全部导出数据
const exportExcelList = () => {
  doDownload('/api/download/exportExcel', {}).then(resp => {
    if (resp.status === 200) {
      //创建一个Blob对象
      const blob = new Blob([resp.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
      // 使用FileSaver保存文件
      FileSaver.saveAs(blob, '客户信息.xlsx'); // 替换为你想要的文件名
      showMessage('导出成功', 'success')
    } else {
      showMessage('导出失败', resp.data.msg, 'error')
    }
  })
}
//选择导出数据
// 获取选中的数据
let ids = []
const handlerSelectChange = (val) => {
  ids = []
  val.forEach(item => {
    ids.push(item.id)
  })
}
//导出已选择的数据
const exportExcel= () => {
  if (ids.length <= 0) {
    showMessage('请选择要导出的数据', 'warning')
    return
  }
    doDownload('/api/download/exportExcel/'+ids, {}).then(resp => {
      if (resp.status === 200) {
        //创建一个Blob对象
        const blob = new Blob([resp.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        // 使用FileSaver保存文件
        FileSaver.saveAs(blob, '客户信息.xlsx');
      }
    })
}
//跳转到详情页面
const detail = (id) => {
  // 跳转
  router.push('/index/customer/detail/' + id)
}
onMounted(() => {
  loaData(1)
})
</script>

<template>
  <el-button type="primary" @click="exportExcel">选择导出</el-button>
  <el-button type="success" @click="exportExcelList">批量导出</el-button>

  <!--  @selection-change="handlerSelectChange"-->
  <el-table
      :data="customerList"
      @selection-change="handlerSelectChange"
      :border="true"
      style="width: 100%">
    <el-table-column type="selection" width="60" align="center"/>
    <el-table-column label="序号" type="index" width="80" align="center"/>
    <el-table-column label="负责人" width="110" property="ownerName" align="center"/>
    <el-table-column label="所属活动" width="165" property="activityName" align="center"/>
    <el-table-column label="姓名" width="110" align="center">
      <template #default="scope">
        <el-link type="primary" @click="detail(scope.row.id)">
          {{ scope.row.fullName }}
        </el-link>
      </template>
    </el-table-column>
    <el-table-column label="称呼" property="appellationName" width="100px" align="center"/>
    <el-table-column label="电话" property="phone" align="center"/>
    <el-table-column label="微信" property="weixin" align="center"/>
    <el-table-column label="是否贷款" property="needLoanName" align="center"/>
    <el-table-column label="意向状态" property="intentionStateName" align="center"/>
    <el-table-column label="意向产品" property="productName" align="center"/>
    <el-table-column label="线索状态" property="stateName" align="center"/>
    <el-table-column label="线索来源" property="sourceName" align="center"/>
    <el-table-column label="下次联系时间" property="nextContactTime" width="205px" align="center"/>
  </el-table>
  <!--分页-->
  <el-pagination
      layout="prev, pager, next, jumper"
      size="small"
      :background="true"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      @change="loaData"/>
</template>

<style scoped>
.trueColor {
  color: limegreen;
}

.el-table {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>